<template>
	<view class="container">
		<view class="" v-if="couponList.length">
			<scroll-view scroll-y="true" class="scroll_y" @scrolltolower="scroll">
				<view class="list" :class="{active:setStyle(item.id)}" v-for="item in couponList" :key="item.id">
					<view class="list_left">
						<view class="top">
							<view class="coupon">{{item.title}}</view>
							<view class="condition">滿{{item.min}}可用</view>
						</view>
						<view class="bottom">
							<view class="number">${{item.money}}</view>
							<view class="time">有效期至{{effectiveTime(item.end_time*1000)}}</view>
						</view>
					</view>
					<view v-if="item.num > item.num_times" class="list_right" @tap="receive(item)">
						<view v-if="!setStyle(item.id)">領取</view>
						<view v-else>已領取</view>
					</view>
					<view v-else class="list_right" @tap="receive(item)">
						<view >已領完</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view style="text-align: center;" v-else>暫無優惠劵</view>

	</view>
</template>

<script>
	import {
		getStoreCouponList,
		receiveStoreCoupon
	} from '@/api/index.js'
	import {
		getCouponTicketCard,
		getUserCouponAll
	} from '@/api/me.js'
	export default {
		data() {
			return {
				couponList: [],
				page: 1,
				flag: false,
				store_id: "",
				list: []
			};
		},
		onLoad(option) {
			this.store_id = option.id
			getStoreCouponList({
				type: 1, // 1--優惠券  2--電子票券  3--儲值卡
				page: 1,
				store_id: option.id
			}).then(res => {
				// console.log(res.data, "優惠券列表")
				this.couponList = res.data
			})

			getUserCouponAll({
				store_id: option.id
			}).then(res => {
				// console.log(res.data, '我的優惠券列表')
				this.list = res.data
			})
		},
		methods: {
			effectiveTime(num) {
				let time = new Date(num)
				let y = time.getFullYear()
				let m = time.getMonth() + 1 >= 10 ? time.getMonth() + 1 : "0" + (time.getMonth() + 1)
				let d = time.getDate() >= 10 ? time.getDate() : "0" + (time.getDate())
				return y + "/" + m + "/" + d
			},
			receive(obj) {
				// console.log(obj,'領取')
				receiveStoreCoupon({
					coupon_id: obj.id,
					store_id: this.store_id
				}).then(res => {
					// console.log(res.data,"領取成功")
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 2000
					})

					this.getCouponListFn()
				})
			},
			getCouponListFn() {
				getStoreCouponList({
					type: 1, // 1--優惠券  2--電子票券  3--儲值卡
					page: 1,
					store_id: this.store_id
				}).then(res => {
					// console.log(res.data, "優惠券列表")
					this.couponList = res.data
				})
				getUserCouponAll({
					store_id: this.store_id
				}).then(res => {
					// console.log(res.data, '我的優惠券列表')
					this.list = res.data
				})
			},
			scroll() {
				if (this.couponList.length >= 10) {
					if (!this.flag) {
						getStoreCouponList({
							type: 1, // 1--優惠券  2--電子票券  3--儲值卡
							page: ++this.page,
							store_id: this.store_id
						}).then(res => {
							console.log(res.data, "優惠券列表")
							if (res.data.length) {
								this.couponList = this.couponList.concat(res.data)
							} else {
								this.flag = true
							}

						})
					}

				}
			},
			setStyle(id) {
				let flag = this.list.filter(item => item.coupon_id == id)[0]
				if (flag) {
					return true
				} else {
					return false
				}
			}
		}
	}
</script>

<style lang="less">
	.container {
		padding: 30rpx;
		box-sizing: border-box;

		.scroll_y {
			height: 90vh;

			// background-color: skyblue;
			.list {
				height: 154rpx;
				width: 100%;
				background-color: #39B19D;
				border-radius: 16rpx;
				border: 1rpx solid #F3F5F9;
				display: flex;
				margin-bottom: 30rpx;

				.list_left {
					width: 90%;
					height: 100%;
					background: #fff;
					border-radius: 16rpx;

					.top {
						height: 62rpx;
						border-bottom: 1rpx dashed #999;
						// padding-top: 15rpx;
						// box-sizing: border-box;
						display: flex;
						align-items: center;
						justify-content: space-between;
						position: relative;

						.coupon {
							font-size: 23rpx;
							font-weight: bold;
							margin-left: 44rpx;
							position: relative;

							&:before {
								content: '';
								display: block;
								width: 5rpx;
								height: 18rpx;
								background: linear-gradient(180deg, #00BC64 0%, #39B19D 100%);
								border-radius: 2rpx 2rpx 2rpx 2rpx;
								opacity: 1;
								position: absolute;
								left: -20rpx;
								top: 0;
								margin-top: 9rpx;
							}
						}

						.condition {
							font-size: 22rpx;
							color: #999;
							margin-right: 60rpx;
						}

						&:before {
							content: "";
							width: 20rpx;
							height: 20rpx;
							border-radius: 50%;
							background: #F3F5F9;
							display: block;
							position: absolute;
							left: 0%;
							bottom: 0%;
							margin-left: -10rpx;
							margin-bottom: -10rpx;
						}

						&::after {
							content: "";
							width: 20rpx;
							height: 20rpx;
							border-radius: 50%;
							background: #39B19D;
							display: block;
							position: absolute;
							right: 0%;
							bottom: 0%;
							margin-right: -10rpx;
							margin-bottom: -10rpx;
						}
					}

					.bottom {
						display: flex;
						align-items: flex-end;
						justify-content: space-between;

						.number {
							margin: 20rpx 0 0 34rpx;
							font-size: 38rpx;
							color: #FF6600;
							font-weight: bold;
						}

						.time {
							font-size: 22rpx;
							color: #999;
							margin-right: 50rpx;
						}
					}
				}

				.list_right {
					flex: 1;

					view {
						width: 100%;
						// 設置文本竪向排列
						writing-mode: vertical-lr;
						height: 154rpx;
						color: white;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 23rpx;
						// 設置文字間隔
						letter-spacing: 13rpx;
					}
				}
			}

			.active {
				background-color: #999;

				.list_left {
					.top {
						&::after {
							background: #999;
						}
					}
				}

			}
		}
	}
</style>